<template>
<div>
  <!-- 新增按钮 -->
  <span style="margin-left: 10px;">
    <el-button type="primary" size="small" @click="noticeDialog=true">新增</el-button>
  </span>
</div>
  <!-- 公告列表 -->
  <div style="height: 80vh;padding: 10px 10px;">
    <el-table align="1" :data="noticeTable">
      <el-table-column prop="releaseTime" label="发布时间" />
      <el-table-column prop="releaseTitle" label="公告标题"/>
      <el-table-column prop="releaseContent" label="公告内容"/>
      <el-table-column prop="releaseName" label="发布人"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" size="small" @click="">详情</el-button>
          <el-button type="text" size="small" @click="">编辑</el-button>
          <el-button type="text" size="small" @click="">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 新增弹窗 -->
  <el-dialog :title="DialogTitle" v-model="noticeDialog" style="margin-top: 25vh;">
    <el-form label-width="80px" label-position="left" >
      <el-form-item label="公告主题:">
        <el-input placeholder="请输入公告主题" style="width: 360px;" ></el-input>
      </el-form-item>
      <el-form-item label="接收人员:">
          <el-radio-group v-model="choose">
            <el-radio label="全体人员"  ></el-radio>
            <el-radio label="指定人员"  ></el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="公告内容:">
        <el-input type="textarea" style="width: 600px;height: 200px;" ></el-input>
      </el-form-item>
    </el-form>
    <template #footer >
      <el-button type="primary" plain @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveNotice">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>

import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
//定义新增按钮是否显示弹窗
const noticeDialog = ref(false);
//定义变量保存弹窗标题
const DialogTitle = ref('发布公告');
//定义变量保存公告列表数据
const noticeTable = ref([]);
//一打开页面就加载公告列表
onMounted(()=>{
loadNotice();
})
//定义加载公告列表的方法
const loadNotice = ()=>{
  axios.get(BASE_URL+'/api/notice/select').then((response)=>{
    if(response.data.code==2000){
      noticeTable.value = response.data.data;
      console.log(noticeTable.value);
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//定义变量保存接收人员的方法
const choose = ref('全体人员');
//创建变量保存公告表单数据
const saveNoticeFrom = ref({
  releaseTitle:'',
  releaseContent:''
});
//获取当前登录用户
const user = getUser();
//定义保存公告的方法
const saveNotice = ()=>{
// saveNoticeFrom.value.userId = user.value.id;
// let data = qs.stringify(saveNoticeFrom.value);
// axios.post(BASE_URL+'/api/notice/save'+data).then((response)=>{
//   if(response.data.code==2000){
//     ElMessage.success('发布成功!');
//     noticeDialog.value=false;
//     saveNoticeFrom.value={};
//     loadNotice();
//   }else {
//     ElMessage.error(response.data.msg);
//   }
// })

}
//定义取消按钮的方法
const handleClose = ()=>{
  if(confirm('您确定要关闭该窗口吗?')){
    saveNoticeFrom.value = {};
    noticeDialog.value=false;
    loadNotice();
  }
}
//定义查看详情的方法
const details = (id)=>{
  router.push('/noticeDetails');
}
//定义编辑按钮的方法
const edit = (id)=>{

}
//定义删除按钮的方法
const deleteNotice = (id)=>{

}
</script>

<style scoped>

</style>